<template>
	<div class="body">
		<el-form :inline="true" :model="userForm" class="top">
			<el-form-item label="用户名：">
				<el-input v-model="userForm.userName" placeholder="用户名" clearable />
			</el-form-item>
			<el-form-item label="用户邮箱：">
				<el-input v-model="userForm.email" placeholder="邮箱" clearable />
			</el-form-item>
			<el-form-item label="用户手机号：">
				<el-input v-model="userForm.phone" placeholder="手机号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="toSearch">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="uList" class="table">
			<el-table-column prop="userId" label="用户ID" width="70" />
			<el-table-column prop="userName" label="用户名" width="90" />
			<el-table-column label="用户级别" width="100">
				<template #default="scope">
					<span>{{
						scope.row.userType === 0
							? '普通用户'
							: scope.row.userType === 1
							? '管理员'
							: '超级管理员'
					}}</span>
				</template>
			</el-table-column>
			<el-table-column label="是否有效" width="80">
				<template #default="scope">
					<span>{{ scope.row.isBlocked === 0 ? '是' : '否' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="email" label="注册邮箱" width="150" />
			<el-table-column prop="phone" label="注册手机号" width="130" />
			<el-table-column fixed="right" label="操作">
				<template #default="scope">
					<el-button type="warning" @click="toDisable(scope.row)" :disabled="showEbt(scope.row)">{{
						scope.row.isBlocked === 0 ? '禁用' : '启用'
					}}</el-button>
					<el-button
						type="primary"
						@click="toUpdate(scope.row)"
						:disabled="scope.row.userType === 2"
						>修改</el-button
					>
					<el-button type="danger" @click="toDelete(scope.row)" :disabled="scope.row.userType === 2"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog
			v-model="isShow"
			title="用户信息修改"
			width="600"
			align-center
			:close-on-click-modal="false"
			:show-close="false"
		>
			<el-form ref="uFormRef" :model="uForm" :rules="rules" label-width="auto">
				<el-form-item label="用户ID：" prop="userId">
					<el-input v-model="uForm.userId" disabled />
				</el-form-item>
				<el-form-item label="注册邮箱：" prop="email">
					<el-input v-model="uForm.email" disabled />
				</el-form-item>
				<el-form-item label="用户姓名：" prop="userName">
					<el-input v-model="uForm.userName" />
				</el-form-item>
				<el-form-item label="用户级别：" prop="userType">
					<el-radio-group v-model="uForm.userType" :disabled="user.role !== 2">
						<el-radio :label="0">普通用户</el-radio>
						<el-radio :label="1">管理员</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否有效：" prop="isBlocked">
					<el-radio-group v-model="uForm.isBlocked" :disabled="showEbt(uForm)">
						<el-radio :label="1">否</el-radio>
						<el-radio :label="0">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="注册手机号：" prop="phone">
					<el-input v-model="uForm.phone" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="toCanale()">取消</el-button>
					<el-button type="primary" @click="toUpdateSave()">保存</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import { reactive, onMounted, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { userStore } from '@/store/user'
	import { userList, disableUser, releaseUser, deleteUser, updateUser } from '@/api/manager'

	const user = userStore()

	const isShow = ref(false)
	const uFormRef = ref(null)

	const uForm = reactive({
		userId: '',
		userName: '',
		userType: 0,
		isBlocked: 0,
		email: '',
		phone: ''
	})

	const rules = {
		userId: [{ required: true, trigger: 'blur' }],
		email: [{ required: true, trigger: 'blur' }],
		userName: [{ required: true, message: '输入用户名', trigger: 'blur' }],
		userType: [
			{
				required: true,
				message: '选择用户权限',
				trigger: 'change'
			}
		],
		isBlocked: [
			{
				required: true,
				message: '选择用户是否有效',
				trigger: 'change'
			}
		],
		phone: [
			{ required: true, message: '请输入手机号', trigger: 'blur' },
			{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
		]
	}

	const userForm = reactive({
		userName: '',
		email: '',
		phone: ''
	})

	const uList = ref([])

	// 获取用户数据
	const getUserList = async () => {
		const rData = (await userList(userForm)).data
		if (rData.code === 200) {
			uList.value = rData.data
		} else {
			uList.value = []
		}
	}

	onMounted(() => {
		getUserList()
	})

	const showEbt = (v) => {
		if (user.role === 2) {
			if (v.userType == 2) {
				return true
			}
			return false
		} else {
			if (v.userType != 0) {
				return true
			}
		}
	}

	// 查询方法
	const toSearch = () => {
		getUserList()
	}

	// 禁用用户方法
	const toDisable = (row) => {
		const text = row.isBlocked === 0 ? '禁用' : '启用'
		ElMessageBox.confirm('是否' + text + '该用户?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'info'
		})
			.then(async () => {
				let rData = {}
				if (row.isBlocked === 0) {
					rData = (await disableUser({ userId: row.userId })).data
				} else {
					rData = (await releaseUser({ userId: row.userId })).data
				}
				if (rData.code === 200) {
					ElMessage.success(text + '成功')
					getUserList()
				} else {
					ElMessage.error(text + '失败，' + rData.msg)
				}
			})
			.catch(() => {
				ElMessage.info('取消' + text)
			})
	}

	// 删除用户方法
	const toDelete = (row) => {
		ElMessageBox.confirm('是否删除该用户?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(async () => {
				const rData = (await deleteUser([row.userId])).data
				if (rData.code === 200) {
					ElMessage.success('删除成功')
					getUserList()
				} else {
					ElMessage.error('删除失败，' + rData.msg)
				}
			})
			.catch(() => {
				ElMessage.info('取消删除')
			})
	}

	// 打开修改
	const toUpdate = (row) => {
		uForm.userId = row.userId
		uForm.userName = row.userName
		uForm.userType = row.userType
		uForm.isBlocked = row.isBlocked
		uForm.email = row.email
		uForm.phone = row.phone

		isShow.value = true
	}

	const toCanale = () => {
		uFormRef.value.resetFields()
		isShow.value = false
	}

	const toUpdateSave = () => {
		uFormRef.value.validate(async (valid) => {
			if (valid) {
				const rData = (
					await updateUser({
						...uForm,
						email: undefined
					})
				).data
				if (rData.code == 200) {
					ElMessage.success('保存成功')
					getUserList()
					isShow.value = false
				} else {
					ElMessage.error('保存失败，' + rData.msg)
				}
			} else {
				return false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100%;
		width: 100%;
	}
	.top {
		margin: 10px 0;
		:deep(.el-form-item__label) {
			font-size: 18px;
			font-weight: bold;
		}
    :deep(.el-form-item){
      margin-right: 10px;
    }
		:deep(.el-form-item__content) {
			width: 140px;
			.el-button {
				width: 100px;
				font-size: 18px;
			}
		}
	}
	.table {
		height: 80%;
		width: 95%;
	}
	.bottom {
		margin-top: 20px;
	}
</style>